<div
  class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8"
>
  <button type="button" class="toggle-mobile-menu -m-2.5 p-2.5 text-gray-700 lg:hidden">
    <span class="sr-only">Open sidebar</span>
    <%== part("components/icon", name: "hero-bars-3") %>
  </button>
  <!-- Separator -->
  <div class="h-6 w-px bg-gray-900/10 lg:hidden"></div>
  <a href="<%= @project_permissions ? "#{@project.path}/dashboard" : "/project" %>">
    <img class="h-5 w-auto lg:hidden" src="/logo-primary.png" alt="Ubicloud">
  </a>
  <div class="flex flex-1 gap-x-4 self-stretch justify-end lg:gap-x-6">
    <div class="flex items-center gap-x-4 lg:gap-x-6">
      <div class="flex items-center gap-x-3">
        <a
          href="https://www.ubicloud.com/docs/overview?ref=console"
          target="_blank"
          title="Documentation"
          class="text-gray-500 hover:text-gray-700"
        >
          <%== part("components/icon", name: "hero-information-circle", classes: "size-6") %>
        </a>
        <a
          href="https://www.ubicloud.com/docs/changelog?ref=console"
          target="_blank"
          title="Changelog"
          class="text-gray-500 hover:text-gray-700"
        >
          <%== part("components/icon", name: "hero-megaphone", classes: "size-6") %>
        </a>
      </div>
      <!-- Profile dropdown -->
      <div class="relative group dropdown text-sm leading-6 text-gray-900">
        <button type="button" class="-m-1.5 flex items-center p-1.5" title="<%= current_account.email %>">
          <%== part("components/icon", name: "hero-user-circle", classes: "h-8 w-8 rounded-full bg-gray-50") %>
          <span class="hidden lg:flex lg:items-center">
            <span class="ml-3 font-semibold" aria-hidden="true"><%= current_account.name %></span>
            <%== part("components/icon", name: "hero-chevron-down", classes: "h-5 w-5 ml-2 text-gray-400") %>
          </span>
        </button>
        <div
          class="hidden group-[.active]:block absolute right-0 z-10 mt-2.5 w-48 origin-top-right rounded-md bg-white pb-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none divide-y divide-gray-100"
          role="menu"
          tabindex="-1"
        >
          <div class="px-3 py-2">
            <p class="text-sm">Signed in as</p>
            <p class="truncate text-sm font-medium text-gray-900">
              <%= current_account.email %></p>
          </div>
          <div>
            <a href="/account" class="block px-3 py-1 hover:bg-gray-100" role="menuitem" tabindex="-1">My Account</a>
            <a href="/project" class="block px-3 py-1 hover:bg-gray-100" role="menuitem" tabindex="-1">Projects</a>
          </div>
          <div>
            <% form(action: "/logout", method: :post) do %>
              <button type="submit" class="block px-3 py-1 hover:bg-gray-100 w-full text-left" role="menuitem" tabindex="-1">Log out</button>
            <% end %>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
